import React from 'react'
import PropTypes from 'prop-types'
import cssStyle from './index.module.css'
import { Tree } from '@/component'
import { connect } from 'react-redux'
import actions from '@/store/actions.js'

class App extends React.Component{
    constructor(props){
        super(props)
        this.replaceProps = {
            label: 'name',
            children: 'children',
            checkedType: 'checked'
        }
    }
    getNode = node => {
        console.log(node)
    }
    checkboxChange = data => {
        console.log(data)
        this.props.updateAuthRouter(data)
    }
    render(){
        return (
            <div className={ cssStyle.container }>
                <div className={ cssStyle.tree }>
                    <Tree data={ this.props.authRouter } replaceProps={ this.replaceProps } checkBox={ true } nodeClick={ this.getNode } checkboxChange={ this.checkboxChange }
                        render={
                            item => {
                                return(
                                    <div>{ item.name }</div>
                                )
                            }
                        }
                    />
                </div>
            </div>
        )
    }
}

App.propTypes = {
    match: PropTypes.object,
    authRouter: PropTypes.array,
    updateAuthRouter: PropTypes.func,
    updateAccount: PropTypes.func
}

function mapStateToProps(state) {
    return {
        account: state.account,
        authRouter: state.authRouter
    }
}
function mapDispatchToProps(dispatch) {
    return {
        updateAccount: val => dispatch(actions.updateAccount(val)),
        updateAuthRouter: val => dispatch(actions.updateAuthRouter(val))
    }
}
let AppComponent = connect(
    mapStateToProps,
    mapDispatchToProps
)(App)

export default AppComponent